{% extends 'shop/base.html' %}

{% block title %}{{ item.name }}{% endblock %}

{% block content %}
<div class="grid grid-cols-5 gap-6">
    <div class="col-span-3 p-6">
        <img src="{{ item.get_image_url }}" class="rounded-xl">
    </div>

    <div class="flex-auto pl-6 col-span-2 bg-gray-50">
    <div class="flex flex-wrap items-baseline">
      <h1 class="w-full flex-none font-semibold mt-6 mb-2.5">
          商品名称：{{ item.name }}
      </h1>
      <div class="text-4xl leading-7 font-bold text-purple-600">
       <i class="fa-solid fa-trophy"></i> ¥{{ item.price }}
      </div>
      <div class="text-sm font-medium text-gray-400 ml-3">
        是否有货 {{ item.is_sold }}
      </div>
    </div>
    <div class="flex items-baseline my-5">
      <div class="ml-3 text-sm text-gray-500"><i class="fa-regular fa-user"></i> {{ item.created_by }}</div>
    </div>
    <div class="flex space-x-3 mb-4 text-sm font-semibold">
      <div class="flex-auto flex space-x-3">
        {% if item.created_by == request.user %}
          <a href="{% url 'item:edit' item.pk %}" class="w-1/3 flex items-center justify-center rounded-full bg-teal-700 text-white hover:bg-teal-500 button">更新当前商品</a>
          {% else %}
          {% if request.user.is_authenticated %}
          <a href="{% url 'conversation:new' item.pk %}" class="w-1/3 flex items-center justify-center rounded-full bg-purple-700 text-white hover:bg-purple-500 button">{% if conversation_exists %}查看{% else %}发起{% endif %}对话</a>
          <a href="{% url 'cart_add' item.pk %}" class="w-1/3 flex items-center justify-center rounded-full bg-purple-50 text-purple-700 hover:bg-purple-200 button">增加到购物车</a>

          {% endif %}
        {% endif %}
      <button class="flex-none flex items-center justify-center w-9 h-9 rounded-full bg-purple-50 text-purple-700" type="button" aria-label="like">
        <svg width="20" height="20" fill="currentColor">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" />
        </svg>
      </button>
      </div>
    </div>
    <p class="text-sm text-gray-500 mb-4">
      卖家包运费
    </p>
    {% if item.description %}
    <p class="text-gray-700">
        <strong class="text-gray-500">商品详情</strong><br>
        {{ item.description }}
    </p>
    {% endif %}
</div>

</div>

<div class="mt-6 px-6 py-12 bg-gray-100 rounded-xl">
    <h2 class="mb-12 text-2xl text-center">相关的商品</h2>

    <div class="grid grid-cols-3 gap-3">
        {% for item in related_items %}
    <figure class="md:flex bg-gray-200 rounded-xl p-8 md:p-0">
      <img class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="{{ item.get_image_url }}" alt="{{ item.name }}" width="384" height="512">
      <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
        <blockquote>
          <p class="text-lg font-semibold">
            {{ item.name }}
          </p>
        </blockquote>
          <div><h4>￥{{ item.price }}</h4></div>
        <figcaption class="font-medium">
          <div class="text-cyan-600">
              {{ item.created_by }}
          </div>
          <div class="text-gray-500">
              {{ item.description }}
          </div>
        </figcaption>
      </div>
    </figure>
        {% endfor %}
    </div>
</div>
{% endblock %}
